<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>上传文件</title>
<script src="moxie.min.js"></script>
<script src="plupload.dev.js"></script>
<script src="qiniu.js"></script>
</head>

<body>
<style type="text/css">
.upBtn {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  background:#337ab7;
  color:#fff;
}


.spinner {
  width:200px;
  height: 90px;
  position: relative;
  margin: 100px auto;
  text-align:center;
}
 
.double-bounce1, .double-bounce2 {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #67CF22;
  opacity: 0.6;
  position: absolute;
  bottom:0;
  left: 50%;   
  margin:0px 0 0 -30px;
  -webkit-animation: bounce 2.0s infinite ease-in-out;
  animation: bounce 2.0s infinite ease-in-out;
}
 
.double-bounce2 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}
 
@-webkit-keyframes bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}
 
@keyframes bounce {
  0%, 100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 50% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}


.no-file{
	overflow:hidden;
}
.no-file .img{
	overflow:hidden;
	text-align:center;
	padding-top:10px;
}

.no-file{
	display:none;
}
.showThis{
	display:block;
}
.ani-wrap{
	background: #fff;
    overflow: hidden;
    position: fixed;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 99;
    left: 0;
	display:none;
}
</style>
<div class="no-file showThis" id="no-file">
	<span onclick="window.history.go(-1)" style="cursor:pointer">&lt; 返回列表</span>
	<div id="uploadName" style="text-align:center;"></div>
	<div id="container" style="text-align: center;">
		<div class="img"><img src="../images/none-file.png" /></div>
		<span class="upBtn pickfiles" id="pickfiles">上传文件</span>
	</div>
</div>
<!------->
<div class="ani-wrap" id="ani-wrap">
	<div class="spinner" id="ani">
		<p id="words">正在努力上传...</p>
		<div class="double-bounce1"></div>
		<div class="double-bounce2"></div>
	</div>
</div>
<!------生成token算法部分-------->
<script type="text/javascript" src="CryptoJS.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">

//decodeURI('');
//处理url参数
var splitUrl = function(){
	var urls = window.location.search;
	
	var searArr = '';
	if(urls){
		//一次分割
		var urlSearch =  urls.split('?')[1];
		var urlSearch2 =  urlSearch.split('&');
		
		//拼接成json字符串
		for(var i = 0;i<urlSearch2.length;i++){
			var str = urlSearch2[i].replace('=','":"');
			if(i==urlSearch2.length-1){
				searArr = searArr + '"' + str+'"';
			}else{
				searArr = searArr + '"' + str+'",';
			}
		}
		searArr = '{'+searArr+'}';
	}
	var searchJson = eval('('+ searArr + ')');
	
	return searchJson;
};


$(function(){
	var thisName = splitUrl();
	$('#uploadName').html(decodeURI(thisName.name)+'商业计划书上传');
});



var base64EncodeChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_";
function base64encode(str) {
	var out, i, len;
	var c1, c2, c3;
	len = str.length;
	i = 0;
	out = "";
	while (i < len) {
		c1 = str.charCodeAt(i++) & 0xff;
		if (i == len) {
			out += base64EncodeChars.charAt(c1 >> 2);
			out += base64EncodeChars.charAt((c1 & 0x3) << 4);
			out += "==";
			break;
		}
		c2 = str.charCodeAt(i++);
		if (i == len) {
			out += base64EncodeChars.charAt(c1 >> 2);
			out += base64EncodeChars.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4));
			out += base64EncodeChars.charAt((c2 & 0xF) << 2);
			out += "=";
			break;
		}
		c3 = str.charCodeAt(i++);
		out += base64EncodeChars.charAt(c1 >> 2);
		out += base64EncodeChars.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4));
		out += base64EncodeChars.charAt(((c2 & 0xF) << 2) | ((c3 & 0xC0) >> 6));
		out += base64EncodeChars.charAt(c3 & 0x3F);
	}
	return out;
};
function utf16to8(str) {
	var out, i, len, c;
	out = "";
	len = str.length;
	for (i = 0; i < len; i++) {
		c = str.charCodeAt(i);
		if ((c >= 0x0001) && (c <= 0x007F)) {
			out += str.charAt(i);
		} else if (c > 0x07FF) {
			out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
			out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
			out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
		} else {
			out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
			out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
		}
	}
	return out;
};
var safe64 = function(base64) {
	base64 = base64.replace(/\+/g, "-");
	base64 = base64.replace(/\//g, "_");
	return base64;
};
</script>

<!------上传js-------->
<script type="text/javascript">
/*生成uptoken*/
var useToken;
/*服务器信息*/
var cloud = {
		AK : 'c04P6kXFtGyuVpn08gwjWcwgWpWPuM1d9zFEHxzn',
		SK: '7qQ3vZKX73qTV71HzkBdhWHrqn1TI6OV8TLY1OTi',
	};
/*配置上传策略*/
var putPoliacy = {"scope": "seng-save", "deadline":new Date().getTime()+3600000};

/*生成token*/
var genUpToken = function(accessKey, secretKey, putPolicy) {

	//SETP 2
	var put_policy = JSON.stringify(putPolicy);
	//console && console.log("put_policy = ", put_policy);

	//SETP 3
	var encoded = base64encode(utf16to8(put_policy));
	console && console.log("encoded = ", encoded);

	//SETP 4
	var hash = CryptoJS.HmacSHA1(encoded, secretKey);
	var encoded_signed = hash.toString(CryptoJS.enc.Base64);
	//console && console.log("encoded_signed=", encoded_signed)

	//SETP 5
	var upload_token = accessKey + ":" + safe64(encoded_signed) + ":" + encoded;
	//console && console.log("upload_token=", upload_token)
	return upload_token;
};
useToken = genUpToken(cloud.AK,cloud.SK,putPoliacy);



var uploader = Qiniu.uploader({
    runtimes: 'html5,flash,html4',      // 上传模式,依次退化
    browse_button: 'pickfiles',         // 上传选择的点选按钮，**必需**
    // 在初始化时，uptoken, uptoken_url, uptoken_func 三个参数中必须有一个被设置
    // 切如果提供了多个，其优先级为 uptoken > uptoken_url > uptoken_func
    // 其中 uptoken 是直接提供上传凭证，uptoken_url 是提供了获取上传凭证的地址，如果需要定制获取 uptoken 的过程则可以设置 uptoken_func
    uptoken : useToken, // uptoken 是上传凭证，由其他程序生成
    //uptoken_url: '/uptoken',         // Ajax 请求 uptoken 的 Url，**强烈建议设置**（服务端提供）
    // uptoken_func: function(file){    // 在需要获取 uptoken 时，该方法会被调用
    //    // do something
    //    return uptoken;
    // },
    get_new_uptoken: false,             // 设置上传文件的时候是否每次都重新获取新的 uptoken
    // downtoken_url: '/downtoken',
    // Ajax请求downToken的Url，私有空间时使用,JS-SDK 将向该地址POST文件的key和domain,服务端返回的JSON必须包含`url`字段，`url`值为该文件的下载地址
    unique_names: true,              // 默认 false，key 为文件名。若开启该选项，JS-SDK 会为每个文件自动生成key（文件名）
    // save_key: true,                  // 默认 false。若在服务端生成 uptoken 的上传策略中指定了 `sava_key`，则开启，SDK在前端将不对key进行任何处理
    domain: 'o9f18s0p8.bkt.clouddn.com',     // bucket 域名，下载资源时用到，**必需**
    container: 'container',             // 上传区域 DOM ID，默认是 browser_button 的父元素，
    max_file_size: '100mb',             // 最大文件体积限制
    flash_swf_url: 'path/of/plupload/Moxie.swf',  //引入 flash,相对路径
    max_retries: 3,                     // 上传失败最大重试次数
    dragdrop: true,                     // 开启可拖曳上传
    drop_element: 'container',          // 拖曳上传区域元素的 ID，拖曳文件或文件夹后可触发上传
    chunk_size: '4mb',                  // 分块上传时，每块的体积
    auto_start: true,                   // 选择文件后自动上传，若关闭需要自己绑定事件触发上传,
    init: {
        'FilesAdded': function(up, files) {
            plupload.each(files, function(file) {
                // 文件添加进队列后,处理相关的事情
				console.log('文件已经添加进队列');
            });
        },
        'BeforeUpload': function(up, file) {
               // 每个文件上传前,处理相关的事情
				console.log('马上开始上传');
        },
        'UploadProgress': function(up, file) {
               // 每个文件上传时,处理相关的事情
			   //console.log(up, file);
			   
			   var ani = document.getElementById('ani-wrap');
			   ani.style.display = 'block';
        },
        'FileUploaded': function(up, file, info) {
               // 每个文件上传成功后,处理相关的事情
               // 其中 info 是文件上传成功后，服务端返回的json，形式如
               // {
               //    "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",
               //    "key": "gogopher.jpg"
               //  }
               // 参考http://developer.qiniu.com/docs/v6/api/overview/up/response/simple-response.html

               var domain = up.getOption('domain');
			   
               var res = eval("("+info+")");
               var sourceLink = domain + '/' + res.key;// 获取上传成功后的文件的Url
			   console.log('res信息是：'+info);
			   console.log('文件的地址是：'+sourceLink);
			   
				var words = document.getElementById('words');//动画上的文字
				words.innerHTML = '上传成功啦';
				
				var ani = document.getElementById('ani-wrap');//隐藏动画
				ani.style.display = 'none';
				
				/*上传完成隐藏上传框*/
				var ani = document.getElementById('no-file');//隐藏动画
				ani.style.display = 'none';
				
				/*上传完成跳转到文件列表页面*/
				window.location.href='../fileList.html'
				/*填充数据*/
				//alert('您的文件已经上传完成');
        },
        'Error': function(up, err, errTip) {
               //上传出错时,处理相关的事情
			   console.log('草！出错啦');
        },
        'UploadComplete': function() {
               //队列文件处理完毕后,处理相关的事情
			   console.log('队列处理完成啦！');
        },
        'Key': function(up, file) {
            // 若想在前端对每个文件的key进行个性化处理，可以配置该函数
            // 该配置必须要在 unique_names: false , save_key: false 时才生效

            var key = "";
            // do something with key here
            return key
        }
    }
});

// domain 为七牛空间（bucket)对应的域名，选择某个空间后，可通过"空间设置->基本设置->域名设置"查看获取

</script>

</body>
</html>
